<template>
	<view class="submit-bar">
		<checkbox-group @change="handleChange">
			<label>
				<checkbox
					:checked="checkedAll"
					activeBorderColor="#111111"
					activeBackgroundColor="#1111111A"
					iconColor="#111"
					backgroundColor="#fff"
					borderColor="#B7B9BAFF"
					style="
						height: 48rpx;
						flex-basis: 112rpx;
						flex-shrink: 0;
						font-weight: 400;
						font-size: 28rpx;
						color: #717476;
					"
					>全选</checkbox
				>
			</label>
		</checkbox-group>
		<view class="right">
			<view class="share" @tap="openPosterShare">
				<image :src="imgSrc" mode="" style="width: 40rpx; height: 40rpx"></image>
				<view class="text">分享</view>
			</view>

			<b-button
				type="primary"
				@tap="printOrder"
				style="
					width: 240rpx;
					height: 88rpx;
					background: #111111;
					border-radius: 60rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 88rpx;
				"
				>提交打样申请</b-button
			>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import sheep from '@/sheep';

	const emit = defineEmits(['handleTap', 'posterShare']);

	const checkedAll = computed(() => sheep.$store('cart').isAllSelected);
	const imgSrc = ref('./../../../static/common/share.png');

	/**
	 * 全选切换
	 */
	const handleChange = (e) => {
		if (e.detail.value.length > 0) {
			sheep.$store('cart').allSelectedChange(true);
		} else {
			sheep.$store('cart').allSelectedChange(false);
		}
	};
	/**
	 * 打样单提交事件
	 */
	const printOrder = () => {
		emit('printOrder');
	};
	// 画报分享
	const openPosterShare = () => {
		emit('posterShare', true);
	};
</script>

<style lang="scss" scoped>
	.submit-bar {
		width: 686rpx;
		height: 120rpx;
		background-color: #fff;
		box-shadow: 0rpx 20rpx 20rpx -20rpx rgba(18, 24, 26, 0.2);
		border-radius: 60rpx;
		position: fixed;
		z-index: 3;
		bottom: 200rpx;
		padding: 16rpx;
		box-sizing: border-box;
		margin: 22rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.share {
				width: 50rpx;
				height: 76rpx;
				padding-right: 36rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				.text {
					width: 50rpx;
					height: 34rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #111111;
					padding-top: 2rpx;
				}
			}
		}
	}
	:deep(.uni-checkbox-input) {
		& > svg {
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			background: #111;
			color: #111;
		}
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}
</style>
